<template>
  <el-dialog v-model="previewObj.visible" title="练习题库预览">
    <div style="font-size: 15px;font-weight: 600;color:#333333;margin-bottom: 15px;">{{ previewObj.courseParentName
    }}({{ previewObj.courseBankTypeName }})</div>
    <div class="dialog-table-question">
      <el-table :data="previewObj.data" style="width: 100%;max-height:550px;overflow-y: scroll;" border>
        <el-table-column width="230" prop="courseName" label="科目名称" />
        <el-table-column prop="totalAmountQuestion" label="总题数">
          <template #default="scope">
            <span v-if="scope.row.questionAmount">{{ scope.row.questionAmount }}道</span>
            <span v-else style="color:#F56C6C">无上架题库</span>
          </template>
        </el-table-column>
        <el-table-column label="单选题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.single || 0 }}道</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="多选题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.multiple || 0 }}道</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="判断题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.judge || 0 }}道</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="案例题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.case }}组</span>
              <span style="margin-left: 5px;">(共{{ scope.row.typeAmountConf.case * scope.row.caseGroupSize || 0
              }}道)</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="填空题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.fillBlank || 0 }}道</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="简答题">
          <template #default="scope">
            <div v-if="scope.row.typeAmountConf">
              <span>{{ scope.row.typeAmountConf.shortAnswer || 0 }}道</span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="previewObj.visible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps } from 'vue';
import $button from '@/button'
const props = defineProps({ previewObj: { default: '' } })
const previewObj = props.previewObj
</script>

<style  lang="scss">
.dialog-table-question {
  .el-table .el-table__cell {
    height: 50px;
  }
}
</style>
